<template>
	<view class="header">
		<uni-status-bar></uni-status-bar>
		<view class="titlebar">
			<view v-if="leftIcon" class="f fc Icon"  @tap="onClickLeft">
				<view :class="cls"></view>
			</view>
			<view class="f fc title">{{title}}</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '@/components/uni-status-bar'
	export default {
		components: {
		    uniStatusBar
		},
		props: {
			leftIcon: {
				type: Boolean,
				default: true
			},
			cls: {
				type: String,
				default: 'cuIcon-back'
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			onClickLeft() {
			    this.$emit('click-left')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		position: fixed;
		z-index: 990;
		top: 0;
		left: 0;
		width: 100%;
		background: $color;
		.titlebar{
			position: relative;
			height: 44px;
			.Icon{
				position: absolute;
				top: 0;
				left: 0;
				width: 70rpx;
				height: 100%;
				font-size: 32rpx;
				color: #fff;
				.mine-Icon{
					width: 50rpx;
					height: 50rpx;
					margin-left: 20rpx;
					background: url(../static/img/mine-icon.png) no-repeat center;
					background-size: 50rpx;
				}
			}
			.close{
				width: 50rpx;
				height: 100%;
				color: #fff;
				background: url(../static/img/close.png) no-repeat center;
				background-size: 50rpx;
			}
			.title{
				height: 100%;
				font-size: 40rpx;
				color: #fff;
			}
		}
	}
</style>
